<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-08-04 21:47:59
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 主页底部——常用功能
-->
<template>
  <div class="common-fun-box">
    <div class="title-box">常用功能</div>
    <div class="common-body">
      <div v-for="item in userList" :key="item.name" class="list-box" :class="'list-box' + item.colorType"
        @click="runTo(item.url)">
        <div class="user-img-box">
          <span class="iconfont" :class="item.icon"></span>
        </div>
        <div class="user-info-box">
          <div class="info name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonFun',
  data() {
    return {
      userList: [
        {
          name: '预约管理',
          value: '0',
          unit: '人',
          url: '/common-function/subscribe-manage',
          icon: 'icon-mianxing-rili',
          colorType: 1
        },
        {
          name: '我的预约',
          value: '0',
          unit: '人',
          url: '/common-function/my-subscribe',
          icon: 'icon-yuyue2',
          colorType: 2
        },
        {
          name: '视频管理',
          value: '0',
          unit: '人',
          url: '/common-function/video-manage',
          icon: 'icon-shexiangji',
          colorType: 1
        },
        {
          name: '平台客服',
          value: '0',
          unit: '人',
          url: '/',
          icon: 'icon-18erji-2',
          colorType: 2
        }
      ]
    }
  },
  computed: {},
  created() { },
  methods: {
    runTo(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.common-fun-box {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 24px;

  .title-box {
    font-weight: 600;
    font-size: 20px;
    color: #1c1f23;
    line-height: 23px;
    text-align: left;
    padding: 10px 0;
  }

  .common-body {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .list-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 56px;
      height: 94px;
      position: relative;
      flex-direction: column;
      margin-right: 84px;
      cursor: pointer;

      .user-img-box {
        width: 56px;
        height: 56px;
        line-height: 56px;
        background: rgba(40, 147, 255, 0.1);
        border-radius: 20px;
        color: #2893FF;
        text-align: center;

        .iconfont {
          font-size: 26px;
        }
      }

      .user-info-box {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1c1f23;
        line-height: 16px;
        margin-top: 8px;
      }
    }

    .list-box2 {
      .user-img-box {
        background: #FFF5E7;
        color: #FFA318;
      }
    }
  }
}
</style>
